<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3380940_splp3h32qie.css">
<style>
    body {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: rgba(255, 0, 0, 0.1);
    }

    #app {
        width: 100%;
        margin-top: 30px;
    }

    #d2 {
        width: 40%;
        height: 50%;
        float: left;
        background-color: rgba(0, 255, 255, 0.1);
        overflow: hidden;
        overflow: auto;
    }

    #d1 {
        width: 50%;
        height: 30%;
        display: inline-block;
        position: fixed;
    }
</style>
<body>
<a style="text-decoration: none" href="index.html" >返回</a>
<div id="app">
    <div id="d2" style="margin-left: 10px" style="overflow: auto">
        <div v-for="comments in commentsVo">
            <img v-for="url in comments.urlArr" :src="url" alt="" style="width: 25%;height: 100px">
            <h4>
                {{comments.nick}}说:{{comments.content}}<a @click="quantity(comments.id)" href="javascript:void (0)"
                                                          style="text-decoration: none;color: #8c939d;link:#FF0000;visited:#0000ff;hover:#FFCC00;active:#000ff"><i
                    class="iconfont icon-dianzan" style="width: 100px;width: 100px;"></i></a>
                <i>{{comments.quantity}}</i>
                <br>
                发布于:{{comments.created}}
            </h4>
        </div>
    </div>
    <div id="d1">
        <el-upload
                action="upload"
                name="picFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                style="margin-left: 40px">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-form :label-position="labelPosition" label-width="80px" :model="comment"
                 style="margin-left: -40px;width: 50%">
            <el-form-item label="标题">
                <el-input v-model="comment.title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="comment.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="insert()">发布</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/eui.js"></script>

<script>
    let v = new Vue({
        el: "#app",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                labelPosition: 'right',
                comment: {
                    title: '',
                    content: '',
                    url: '',
                    created: '',
                    userId: '',
                    quantity: ''
                },
                commentsVo: [],
            };
        },
        created: function () {
            axios.get("/user/list").then(function (response) {
                console.log(response.data)
                v.commentsVo = response.data;
                for (let comments of v.commentsVo) {
                    comments.urlArr = comments.url == "" ? [] : comments.url.split(",")
                }
            })
        },
        methods: {
            handleRemove(file, fileList) {
                axios.get("/remove?name=" + file.response).then(function (response) {
                })
                let arr = [];
                for (let file of fileList) {
                    arr.push(file.response)
                }
                v.comment.url = arr.toString();
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess(response, file, fileList) {
                let arr = [];
                for (let file of fileList) {
                    arr.push(file.response)
                }
                v.comment.url = arr.toString();
            },
            insert() {
                axios.post("/user/insert", v.comment).then(function (response) {
                    if (response.data == 1) {

                        v.$message.success("发表成功")
                        location.reload();
                    } else if (response.data == 3) {
                        v.$message.error("评论还是空白哦!")
                        setTimeout(function () {
                            location.reload()
                        }, 2000)
                    } else if (response.data == 4) {
                        v.$message.error("一次只能上传一张图片")
                        setTimeout(function () {
                            location.reload()
                        }, 2000)
                    } else {
                        v.$message.error("请先登录")
                        setTimeout(function () {
                            location.href = "/login.html"
                        }, 3000)
                    }
                })

            },
            quantity(id) {
                axios.get("/user/quantity?id=" + id).then(function (response) {
                    console.log(response.data)
                    if (response.data == 1) {
                        location.reload();
                    } else if (response.data == 0) {
                        v.$message.error("请先登录!")
                        setTimeout(function () {
                            location.href = "login.html"
                        }, 2000)
                    } else if (response.data == 2) {
                        location.reload();
                    }

                })
            }
        }
    })
</script>
</html>